import 'package:demo202112/utils/common_appbar.dart';
import 'package:flutter/material.dart';

/// @Author wywinstonwy
/// @Date 2022/10/24 09:02
/// @Description: 

class HeroListPage extends StatefulWidget {
  const HeroListPage({Key? key}) : super(key: key);

  @override
  State<HeroListPage> createState() => _HeroListPageState();
}

class _HeroListPageState extends State<HeroListPage> {
  var listImages = [
    'http://cools.qctt.cn/1666242448385.jpeg?imageView2/1/w/800/h/450',
  'http://cools.qctt.cn/1666183905385.jpeg?imageView2/1/w/800/h/450'
  ];
  var titles =['嗨!Car｜更帅更猛 更大更强，全新宝马X1能否再创辉煌 ',
    '嗨!Car｜纯电领域能否维持超豪华品牌荣光？劳斯莱斯闪灵给你答案 '];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      appBar: getAppBar("每日新闻"),
      //主体页面
      body: buildListBodyWidget(),
    );
  }
  Widget buildListBodyWidget(){
    return ListView(
      children:  [
        InkWell(
          //点击跳转
          onTap: (){
          openPageFunction(listImages[0], titles[0]);
        },
        child: Container(
          padding: EdgeInsets.all(10),
          color: Colors.white,
          child: Row(//主轴方向开始对齐 在这里是左对齐
            mainAxisAlignment: MainAxisAlignment.start,
            //交叉轴上开始对齐 在这里是顶部对齐
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              //左侧的图片
              buildLeftImage(listImages[0]),
              //右侧的文本区域
              buildRightTextArea(titles[0])],
          ),
        ),
        ),
        InkWell(
          //点击跳转
          onTap: (){
            openPageFunction(listImages[1], titles[1]);
          },
          child: Container(
            padding: EdgeInsets.all(10),
            color: Colors.white,
            child: Row(//主轴方向开始对齐 在这里是左对齐
              mainAxisAlignment: MainAxisAlignment.start,
              //交叉轴上开始对齐 在这里是顶部对齐
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                //左侧的图片
                buildLeftImage(listImages[1]),
                //右侧的文本区域
                buildRightTextArea(titles[1])],
            ),
          ),
        ),
      ],
    );
  }
  ///左侧的图片区域
  Container buildLeftImage(imageurl) {
    return Container(
      margin: EdgeInsets.only(right: 12),
      child: Hero(
        tag: imageurl,
        child: Image.network(imageurl,width: 95,height:95,fit: BoxFit.fill),
        // child: Image.asset(
        //   "images/banner3.webp",
        //   width: 96,
        //   fit: BoxFit.fill,
        //   height: 96,
        // ),
      ),
    );
  }
  ///右侧的文本区域
  Expanded buildRightTextArea(titile) {
    return Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          const Text(
            "优美的应用",
            softWrap: true,
            overflow: TextOverflow.ellipsis,
            maxLines: 3,
            style: TextStyle(fontSize: 16),
          ),
          Text(
            titile,
            softWrap: true,
            overflow: TextOverflow.ellipsis,
            maxLines: 3,
            style: TextStyle(fontSize: 14, color: Colors.black38),
          )
        ],
      ),
    );
  }
  //自定义动画路由过度效果
  void openPageFunction(imageurl,title){
    Navigator.of(context).push(
      PageRouteBuilder(pageBuilder: (BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation){
        return DetailsHeroPage(imageurl,title);
      },
        //打开新的页面用时
        transitionDuration: Duration(milliseconds: 1000),
        //关半页用时
        reverseTransitionDuration: Duration(milliseconds: 500),
        //过渡动画构建
        transitionsBuilder: (BuildContext context,Animation<double> animation,
        Animation<double> secondaryAnimation,
            Widget child,){
          //渐变过渡动画
          return FadeTransition(
            // 透明度从 0.0-1.0
            opacity: Tween(begin: 0.0,end: 1.0).animate(CurvedAnimation(
                parent: animation,
                //动画曲线规则，这里使用的是先快后慢
                curve: Curves.fastOutSlowIn
              )
              ),
            child: child,
          );
        }
      ),
    );
  }

}

//路由B页面详情页
class DetailsHeroPage extends StatelessWidget {
  //页面创建时候接受参数
  final String imageurl;
  final String title;
  DetailsHeroPage( this.imageurl, this.title);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //背景透明
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text("精彩人生"),
      ),
      body: buildCurrentWidget(context),
    );
  }

  Widget buildCurrentWidget(BuildContext context) {
    return Container(
      color: Colors.white,
      padding: EdgeInsets.all(8),
      margin: EdgeInsets.all(10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          //图片区域
          buildHero(context),
          SizedBox(
            width: 22,
          ),
          //文字区域
          buildTextContainer(),
        ],
      ),
    );
  }

  ///图片区域
  Hero buildHero(BuildContext context) {
    return Hero(
      tag: imageurl,
      child: Material(
        color: Colors.blue,
        child: InkWell(
          onTap: () {
            Navigator.of(context).pop();
          },
          child: Image.network(imageurl,fit: BoxFit.fill),

        ),
      ),
    );
  }

  Container buildTextContainer() {
    return Container(
      child: Text(
       title,
        softWrap: true,
        overflow: TextOverflow.ellipsis,
        maxLines: 3,
        style: TextStyle(fontSize: 16),
      ),
    );
  }
}